<template>
	<!-- 首页灵活用工详情页组件 -->
	<view class="main1">
		<view class="workItem">
			<view class="header">
				<text class="name" v-if="type=='招工'">{{info.work_name}}</text>
				<text class="name" v-else>{{info.realname}}</text>
			</view>
			<view class="header" >
				<text class="money">{{info.wages.replace(',', '')}}</text>
				<!-- <text class="money" v-show="isMonth">{{info.wages}}元/月 </text>
				<text class="money" v-show="isNumber">{{info.wages}}元/件</text> -->
				<!-- <text class="money" >{{info.wages}} {{info.settlement=='日结'?'元/天':''}} {{info.settlement=='月结'?'元/月':''}} {{info.settlement=='计件'?'元/件':''}}{{info.settlement=='计时'?'元/小时':''}}{{info.settlement=='按趟'?'元/趟':''}}{{item.settlement=='按单'?'元/单':''}}</text> -->
			</view>
			<view class="center">
				<view class="tags">
					<view :class="[info.create_type=='企业'?'tagItem1':'tagItem2']" v-if="type=='招工'">{{info.create_type}}</view>
					<view class="tagItem2" v-else>{{info.create_type}}</view>
					<view class="tagItem">{{info.settlement}}</view>
					<!-- <view class="tagItem" v-if="type=='招工'">{{info.need_num}}人</view> -->
					<view class="tagItem" v-if="type=='招工'">{{info.need_num}}人</view>
					<view class="tagItem" v-if="type=='招工'">{{info.work_exp==''||info.work_exp==null ?'不限':info.work_exp}}</view>
				</view>
				<view class="time">
					{{info.add_time}}
				</view>
			</view>
		</view>
		<view class="commonTitle">
			<text>{{type=="求职"?"求职信息":"工作信息"}}</text>
		</view>
		<view class="infos">
			<u-cell-group >
			        <!-- <u-cell-item  :arrow="false" title="公司名称:" :label="info.company_name"></u-cell-item> -->
					<!-- <u-cell-item v-if="type=='招工'"  :arrow="false" title="招工日期截止:" :value="info.expire_time"></u-cell-item> -->
					<!-- <u-cell-item v-if="type=='招工'"  :arrow="false" title="招工日期截止:" :value="info.expire_time"></u-cell-item> -->
					<u-cell-item v-if="type=='招工'"  :arrow="false" title="招工日期截止:">
						<view class="u-cell1">{{info.expire_time}}</view>
					</u-cell-item>
					<u-cell-item class="" v-if="type=='招工'" :arrow="false" title="工作内容:" >
						<view class="u-cell1">{{info.description}}</view>
					</u-cell-item>
					<u-cell-item :arrow="false" :title="type=='招工'?'工种类型:':'从事工种类型:'">
						<view class="u-cell1">{{info.work_type}}</view>
					</u-cell-item>
					<u-cell-item :arrow="false" title="岗位名称:" >
						<view class="u-cell1">{{info.work_name}}</view>
					</u-cell-item>

					<u-cell-item v-if="type=='求职'" :arrow="false" title="技能描述:" >
						<view class="u-cell1">{{info.description}}</view>
					</u-cell-item>
					<u-cell-item v-if="type=='招工'" :arrow="false" title="年龄要求:" >
						<view class="u-cell1">{{info.age_ask}}</view>
					</u-cell-item>
					<u-cell-item v-if="type=='招工'" :arrow="false" title="性别要求:" >
						<view class="u-cell1">{{info.sex_ask}}</view>
					</u-cell-item>
			</u-cell-group>
		</view>
		<view class="commonTitle" v-if="type=='招工' && info.create_type=='企业'">
			<text>公司名称</text>
		</view>

		<view class="infos" v-if="type=='招工' && info.create_type=='企业'">
			<u-cell-group>
					<u-cell-item  :arrow="false" title="公司名称:" >
						<view class="u-cell1">{{info.company_name}}</view>
					</u-cell-item>
			</u-cell-group>
		</view>

		<view class="commonTitle" v-if="type=='招工'">
			<text>招聘人数</text>
		</view>

		<view class="infos" v-if="type=='招工'">
			<u-cell-group>
					<u-cell-item  :arrow="false" title="招聘人数:">
					<view class="u-cell1">{{info.need_num}}人</view>
					</u-cell-item>
			</u-cell-group>
		</view>

		<view class="commonTitle">
			<text>联系方式</text>
		</view>
		<view class="infos add">
			<u-cell-group>
					<u-cell-item class="cell" :arrow="false" title="联系人:" >
						<view class="u-cell1">{{info.realname}}</view>
					</u-cell-item>
					<u-cell-item  :arrow="false" title="手机号:">
						<view class="u-cell1">{{phone}}</view>
					</u-cell-item>
					<!-- <u-cell-item class="addText"  :arrow="false" title="地址:" :label="info.province+info.city+info.area+info.address"></u-cell-item> -->
					<!-- <u-cell-item class="addText"  :arrow="false" title="地址:" :label="info.address"></u-cell-item> -->
			</u-cell-group>
			<view class="addText1">
				<text>{{type=='招工'?'工作地址':'求职地址'}}:</text>
				<view class="view1">{{info.address}}</view>
			</view>
			<!-- 导航图标在模拟器和真机上有偏差 -->
			<view class="addrBox" @click="openMap">
				<view class="addr">
				  <img
					src="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/local.jpg"
					alt=""
				  />
				  <view>导航</view>
				</view>
			</view>
		</view>



		<view class="commonTitle">
			<text>工作环境</text>
		</view>

		<!-- <u-popup v-model="showPopup" mode="center" @click="showPopup=true"> -->
		<view class="infos" >
			<u-swiper v-if="info.img_urls" height='320' :list="listImage" :effect3d="true" @click="clickImg"></u-swiper>
		</view>
		<!-- </u-popup> -->

		<view class="infos" v-if="info.video_url">
			<video style="width:100%" :src="info.video_url"></video>
		</view>

		<!-- 免责声明 -->
		<view class="commonTitle">
			<text>免责声明</text>
		</view>
		<view class="infos add">
			本平台仅是信息发布平台，对于内容真实性不承担调查与保证义务，用户在招聘及求职过程中应注意信息甄别与核对，用户在招聘中产生的任何问题均由双方自行承担法律后果，本平台不承担任何连带责任。
		</view>

		<!-- 其他岗位推荐 -->
		<!-- <view class="commonTitle">
			<text>其他岗位推荐</text>
		</view>
		<view class="infos add">
			推荐的岗位。。。。
		</view> -->



		<view style="height: 150rpx;width: 100%;"></view>




		<view class="footer_bottom">
			<view class="star" @click="shoucang">
				<u-icon v-if="isShowCang" class="icon" name="star-fill" color="#2979ff" size="50"></u-icon>
				<u-icon v-else class="icon" name="star" color="#2979ff" size="34"></u-icon>
				<text>{{isShowCang?'已收藏':'收藏'}}</text>
			</view>
			<view class="f">
				<u-button shape="circle" type="primary" @click="ljbm">立即报名</u-button>
			</view>
		</view>

		<!-- 立即报名须知 -->
		<u-popup v-model="ljShow" mode="center" mask-close-able="true" width="80%" height="550rpx"  border-radius='30'>
					<view class="tcContent">
						<view class="text1">温馨提示</view>
						<view class="text2">
							1、您在确认报名时，系统将视为您同意用工。<br>
							2、请确认个人情况与雇主要求匹配。<br>
							3、报名后既可联系雇主方。<br>
						</view>
						<view class="text3">更多注意事项请查看<text @click="goWGXZ">《务工须知》</text></view>
						<view class="text4">您点击“知道了”,既表示您已阅读并同意《务工须知》</view>
						<view class="uButton" >
							<u-button type="primary" @click="ljShow1">知道了</u-button>
						</view>
					</view>
		</u-popup>
	</view>
</template>

<script>
	import Map from "@/js_sdk/ms-openMap/openMap.js";
		import api from '../../../../api/routes.js'
	export default {


		data() {
			return {
				num:0,
				ljShow:false,
				info:{},
				phone:'',//隐藏手机号
				isShowCang:false,
				showPopup:false,
				type:'',
				listSelect: [],
				show: false,
				value: '17868804701',
				listImage:[],
				list: [{
					name: '个人发布'
				}, {
					name: '企业发布'
				}],
				current: 0
			};
		},
		async onLoad(options) {
			console.log(options.type)
			//求职、招工 两个类型
			if(options.type=='求职'){
				wx.setNavigationBarTitle({
				  title: '求职信息详情'
				})
			}else{
				wx.setNavigationBarTitle({
				  title: '招工信息详情'
				})
			}
			this.type = options.type
			console.log(this.type,5959);
			let id = options.id
			wx.showLoading()

			const res = await this.$myRequest({
				url: api.lgInfoDetail+'?id='+id,
				method: "GET",
				data: {
				},
			});
			console.log(res)
			if (res.data.code == 0) {
				wx.hideLoading()
				// listImage
				if(res.data.info.img_urls){
					this.listImage = res.data.info.img_urls.split(',')
				}
				this.info = res.data.info
				// 对手机号进行部分影藏处理
				// var phone = "18200002111";
				// phone.replace(/^(\d{3})\d+(\d{4})$/, "$1****$2");

				var phone = this.info.tell;
				this.phone= phone.replace(/^(\d{3})\d+(\d{4})$/, "$1****$2");
				console.log(res.data,6363);
				console.log(this.info.settlement);
			} else {
				wx.showToast({
					title: '查询失败',
					icon: 'none'
				})
			}
		},
		computed:{
			isDay(){
				if(this.info.settlement=="日结"){
					return true;

				}else{
					return false;
				}
			},
			isMonth(){
				if(this.info.settlement=="月结"){
					return true;

				}else{
					return false;
				}
			},
			isNumber(){
				if(this.info.settlement=="计件"){
					return true;

				}else{
					return false;
				}
			},
		},

		methods: {
			ljShow1(){
				this.ljShow=false;
			},
			ljbm(){
				this.num+=1,
				console.log(this.num,"第几次");
				if(this.num % 2==0){
					wx.makePhoneCall({
					  phoneNumber: this.info.tell //仅为示例，并非真实的电话号码
					})
				}else{
					this.ljShow=true
				}


			},


			goWGXZ(){
				uni.navigateTo({
					url: '/package/pages/searchJob/other/workInstructions',
				});
			},
			shoucang(){
				this.isShowCang = !this.isShowCang
				wx.showToast({
					icon:'none',
					title: this.isShowCang?'收藏成功':'取消收藏',
				})
			},
			chooseAddress() {
				var _this = this;
				wx.chooseLocation({
					success: function(res) {
						var name = res.name
						var address = res.address
						var latitude = res.latitude
						var longitude = res.longitude
					}
				})
			},
			confirm(val) {
				console.log(val)
			},
			showSelect(val) {
				console.log(val)
				if (val == 1) {
					this.listSelect = this.list1
				} else if (val == 3) {
					this.listSelect = this.list3
				} else if (val == 4) {
					this.listSelect = this.list4
				}else if (val == 5) {
					this.listSelect = this.list5
				}
				this.show = true
			},
			openMap() {
			  let { lat, lgt, address } = this.info;
			  Map.openMap(lat, lgt, address, "bd09");
			  console.log(this.info,"导航数据");
			  // Map.openMap(39.92848272, 116.39560823, address, 'gcj02')
			},
			change(index) {
				this.current = index;
			},
			goGuzhu() {
				uni.navigateTo({
					url: '/package/pages/searchJob/other/woshiguzhu',
				});
			},
			goLinggong() {
				uni.navigateTo({
					url: '/package/pages/searchJob/other/woshilinggong',
				});
			},
			lgRegister() {
				console.log("林工登记！！！");
				uni.navigateTo({
					url: '/package/pages/components/lingGonRegister',
				});
			},
			clickImg(index){
				console.log("点击第",index);
				uni.previewImage({
				   urls: this.listImage, //需要预览的图片http链接列表，注意是数组
				   current: index, // 当前显示图片的http链接，默认是第一个


				 })
			}
		},
	};
</script>

<!-- <style>
/* #ifndef H5 */
page {
  height: 100%;
  background-color: #f2f2f2;
}

/* #endif */
</style> -->

<style lang="scss" scoped>
	.main1 {
		background: white;
		.infos{
			width: 94%;
			margin-left: 3%;
			margin-top: 20px;
		}
		.u-cell1{
			text-align: left;
			padding-left: 20px;
			font-size: 12px;
			color: #000000;
		}
		.commonTitle{
			width: 300rpx;
			margin-left: 4%;
			font-size: 34rpx;
			border-left: 4px solid #1684fd;
			margin-top: 20rpx;
			text{
				margin-left: 20rpx;
				font-weight: bold;
				font-family: Arial, Helvetica, sans-serif;
			}
		}
		.footer_bottom{
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			z-index: 999;
			display: flex;
			align-items: center;
			.star{
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.icon{
					font-size: 40rpx;
				}
				text{
					font-size: 24rpx;
				}
			}
			.f{
				width: 70%;
				margin-left: 5%;
			}
			position: fixed;
			bottom: 0;
			height: 120rpx;
			background: white;
			width: 100%;
		}
		.workItem{
			width: 94%;
			margin-left: 3%;
			height: 225rpx;
			border-radius: 6px;
			margin-top: 20rpx;
			background: white;
			.header{
				height:70rpx;
				.name{
					color: #333;
					font-size: 38rpx;
					font-weight: bold;
					font-family: Arial, Helvetica, sans-serif;
				}
				.money{
					color: #F75E54;
					font-size: 32rpx;
					font-weight: 500;
					font-family: Arial, Helvetica, sans-serif;
				}
			}
			.center{
				height: 75rpx;
				border-bottom: 1px solid #E4E7ED;
				.time{
					color: #000000;
					font-size: 28rpx;
					font-family: Arial, Helvetica, sans-serif;
				}
				.tags{
					display: flex;
					.tagItem{
						font-size: 24rpx;
						margin-right: 15rpx;
						padding:4rpx 10rpx 4rpx 10rpx;
						border-radius: 2px;
						background: #DBF1E1;
						color: #19BE6B;
					}
					.tagItem1{
						font-size: 24rpx;
						margin-right: 15rpx;
						padding:4rpx 10rpx 4rpx 10rpx;
						border-radius: 2px;
						background: #ECF5FF;
						color: #2979FF;
					}
					.tagItem2{
						font-size: 24rpx;
						margin-right: 15rpx;
						padding:4rpx 10rpx 4rpx 10rpx;
						border-radius: 2px;
						background: #FDF6EC;
						color: #FCBD71;
					}

				}
			}
			.header,.center,.footer{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 96%;
				margin-left: 2%;
			}
		}
	}
	.addText{
		color: red;
		width: 80%;

	}
	.add{
		position: relative;
	}
	.addrBox {
		position: absolute;
		// right: 20rpx;
		// top:160rpx;
	  display: flex;
	  align-items: center;
	  font-size: 13px;
	  margin-top: -40rpx;
	  z-index: 999;
	  right: 10px;
	  bottom: 16px;
	  .addrleft {
	    flex: 1;
	  }
	  .addr {
	    text-align: center;
	    font-size: 12px;
	    margin-left: 10px;
	    color: #525252;
	  }
	  img {
	    display: block;
	    width: 28px;
	    height: 28px;
	  }
	}
	.addText1{
		height: 70px;
		width: 86%;
		color: gray;
		margin: 8px 0 0 10px;
		.view1{
			color: #000000;
			font-size: 12px;
		}
	}
	.tcContent{
		border-radius: 10rpx;
		padding: 10px;
		overflow: hidden;
		.text1{
			text-align: center;
			color: #053B91;
			line-height: 40px;
			font-weight: bold;
			font-size: 18px;
		}
		.text2{
			color: #333;
			font-size: 14px;
			// font-weight: bold;
			line-height: 24px;
		}
		.text3{
			color: #666666;
			font-size: 14px;
			line-height: 28px;
			text{
				color: #1684FC;
				font-weight: bold;
			}
		}
		.text4{
			color: #9A9A9A;
			font-size: 14px;
			margin-bottom: 30px;
		}
		.uButton{
			position: absolute;
			bottom: 10px;
			width: 92%;
		}

	}
	::v-deep .u-cell_title{
		font-size: 32rpx;
	}
	::v-deep .u-cell-box  .u-cell-item-box:nth-child(2){
		.u-cell__value{
			text-align: left !important;
		}
	}
	/deep/.u-icon__icon{
	    font-size: 52rpx !important;
	}


</style>
